<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
	xmlns:th="http://www.thymeleaf.org">

<head>

<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/layui/css/layui.css">
<link rel="stylesheet" href="/css/custom.form.css">

</head>
<body>

	<div class="panel panel-default operation_dept" hidden>
		<div class="panel-heading title"></div>
		<div class="layui-card-body">
			<form class="layui-form layui-form-pane" action=""
				lay-filter="deptInfo" style="width: 700px; margin-top: 10px">
				<input name="id" hidden /> <input name="pid" hidden />
				<div class="layui-form-item">
					<label class="layui-form-label">部门名称</label>
					<div class="layui-input-block">
						<input type="name" name="name" placeholder="请输入组织机构名称"
							autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-form-label ">所属部门</div>
					<div class="layui-input-block">
						<input type="pidName" name="pidName" placeholder="请选择所属部门"
							autocomplete="off" class="layui-input" readonly="readonly"
							style="background: #eeeeee !important">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label ">部门经理名称</label>
					<div class="layui-input-block">
						<input type="managerName" name="managerName"
							placeholder="请输入部门经理手机号" autocomplete="off" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<div class="layui-form-label">部门经理手机号</div>
					<div class="layui-input-block">
						<input type="phone" name="phone" placeholder="请输入部门经理手机号"
							autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">状态</label>
					<div class="layui-input-block">
						<input type="checkbox" name="status" lay-skin="switch"
							lay-filter="switch" lay-text="启用|禁用" checked>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button type="submit" class="layui-btn" lay-submit=""
							lay-filter="submit">保存</button>
						<button class="layui-btn layui-btn-primary" id="btn_cancel">返回</button>
					</div>
				</div>
			</form>
		</div>
	</div>
	<div class="dept-table">
		<table class="layui-table" id="deptTable" lay-filter="deptTable"></table>
	</div>
	<div id="deptTree" style="display: none"></div>
	<!-- 
	<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addDept" shiro:hasPermission="sys:dept:add">添加</button>
    </div>
	</script>
	<script type="text/html" id="tool">
    	<a shiro:hasPermission="sys:dept:update" class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    	<a shiro:hasPermission="sys:dept:deleted" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	 -->
	 
	<script src="/layui/layui.all.js"></script>
	<script src="/js/core.util.js"></script>
	<script th:inline="none">
		var layer = layui.layer;
		var $ = jQuery = layui.jquery;
		var form = layui.form;
		var element = layui.element;
		var treetable;
		var selectNode = {};
		layui
				.config({
					base : '/'
				})
				.extend({
					treetable : 'treetable-lay/treetable'
				})
				.use(
						[ 'treetable', 'table', 'tree' ],
						function() {
							var reloadTreeTable = function() {
								CoreUtil.sendGet("/sys/depts", null, function(
										res) {
									renderTable(res.data);
								});
							};
							reloadTreeTable();
							treetable = layui.treetable;
							var table = layui.table;
							var tree = layui.tree;
							var renderTable = function(data) {
								treetable
										.render({
											// 渲染表格
											data : data,
											treeColIndex : 1, // 树形图标显示在第几列
											treeSpid : 0, // 最上级的父级id
											treeIdName : 'id', // id字段的名称
											treePidName : 'pid', // pid字段的名称
											treeDefaultClose : false, // 是否默认折叠
											treeLinkage : true, // 父级展开时是否自动展开所有子级
											elem : '#deptTable', // 表格id
											page : false, // 树形表格一般是没有分页的
											toolbar : '#toolbar',
											cols : [ [
													{
														type : 'numbers'
													},
													{
														field : 'deptNo',
														title : '部门编码',
														width : 150
													},
													{
														field : 'name',
														title : '部门名称',
													},
													{
														field : 'pidName',
														title : '上级部门名称',
														templet : function(item) {
															if (item.pidName === null
																	|| item.pidName === undefined) {
																return "最顶级部门";
															} else {
																return item.pidName;
															}
														}
													},
													/* {
														field : 'relationCode',
														title : '层级关系编码'
													},
													{
														field : 'managerName',
														title : '部门经理'
													},
													{
														field : 'phone',
														title : '部门经理联系电话'
													}, 
													{
														field : 'status',
														title : '状态',
														templet : function(item) {
															if (item.status === 1) {
																return '  <input type="checkbox" lay-skin="switch" lay-text="启用|禁用" checked disabled>';
															}
															if (item.status === 0) {
																return '  <input type="checkbox" lay-skin="switch" lay-text="启用|禁用" disabled>';
															}
														}
													}, {
														field : 'createTime',
														title : '创建时间',
														minWidth : 120
													},  {
														title : '操作',
														width : 250,
														toolbar : '#tool'
													}  */] ]
										});

							};
							//操作项事件
							table
									.on(
											'tool(deptTable)',
											function(obj) {
												var data = obj.data;
												switch (obj.event) {
												case 'del':
													deletedDept(data.id,
															data.name);
													break;
												case 'edit':
													selectNode = null;
													$(".dept-table").hide();
													$(".operation_dept").show();
													$(".title").html("编辑部门");
													$(
															".operation_dept input[name=id]")
															.val(data.id);
													$(
															".operation_dept input[name=pid]")
															.val(data.pid);
													$(
															".operation_dept input[name=name]")
															.val(data.name);
													$(
															".operation_dept input[name=pidName]")
															.val(data.pidName);
													$(
															".operation_dept input[name=managerName]")
															.val(
																	data.managerName);
													$(
															".operation_dept input[name=phone]")
															.val(data.phone);
													if (data.status == 1) {
														$(
																".operation_dept input[name=status]")
																.attr(
																		'checked',
																		'checked');
														$(
																".operation_dept input[name=status]")
																.attr('type',
																		'hidden')
																.val(1);
														var x = document
																.getElementsByClassName("layui-unselect layui-form-switch");
														x[0]
																.setAttribute(
																		"class",
																		"layui-unselect layui-form-switch layui-form-onswitch");
														var d = document
																.getElementsByTagName('em')[0];
														d.firstChild.nodeValue = '启用';
													} else {
														$(
																".operation_dept input[name=status]")
																.attr('type',
																		'hidden')
																.removeAttr(
																		"checked")
																.val(0);
														var x = document
																.getElementsByClassName("layui-unselect layui-form-switch");
														x[0]
																.setAttribute(
																		"class",
																		"layui-unselect layui-form-switch");
														var d = document
																.getElementsByTagName('em')[0];
														d.firstChild.nodeValue = '禁用';
													}
													form.render(); //更新全部
													initTree(data.id);
													break;
												}
											});
							table
									.on(
											'toolbar(deptTable)',
											function(obj) {
												switch (obj.event) {
												case 'addDept':
													selectNode = null;
													$(".dept-table").hide();
													$(".operation_dept").show();
													$(".title").html("新增部门");
													$(
															".operation_dept input[name=id]")
															.val("");
													$(
															".operation_dept input[name=pid]")
															.val("");
													$(
															".operation_dept input[name=name]")
															.val("");
													$(
															".operation_dept input[name=pidName]")
															.val("");
													$(
															".operation_dept input[name=managerName]")
															.val("");
													$(
															".operation_dept input[name=phone]")
															.val("");
													$(
															".operation_dept input[name=status]")
															.attr('checked',
																	'checked');
													$(
															".operation_dept input[name=status]")
															.attr('type',
																	'hidden')
															.val(1);
													var x = document
															.getElementsByClassName("layui-unselect layui-form-switch");
													x[0]
															.setAttribute(
																	"class",
																	"layui-unselect layui-form-switch layui-form-onswitch");
													var d = document
															.getElementsByTagName('em')[0];
													d.firstChild.nodeValue = '启用';
													form.render(); //更新全部
													initTree("");
													break;
												}
											});
							var deletedDept = function(deptId, menuName) {
								layer.open({
									content : '确定要删除' + menuName + "?",
									yes : function(index, layero) {
										layer.close(index); //如果设定了yes回调，需进行手工关闭
										CoreUtil.sendDelete("/sys/dept/"
												+ deptId, null, function(res) {
											layer.msg(res.msg);
											reloadTreeTable();
										});
									}
								});
							};
							$("#btn_cancel").click(function() {
								$(".dept-table").show();
								$(".operation_dept").hide();
								return false;
							});
							var loadDeptTree = function(data) {
								tree
										.render({
											elem : '#deptTree',
											data : data,
											onlyIconControl : true //是否仅允许节点左侧图标控制展开收缩
											,
											click : function(obj) {
												selectNode = obj;
												layer
														.msg(JSON
																.stringify(selectNode.data.title));
											}
										});
							};
							$(".operation_dept input[name=pidName]")
									.click(
											function() {
												layer
														.open({
															type : 1,
															skin : 'layui-layer-molv',
															title : "选择部门",
															area : [ '400px',
																	'450px' ],
															shade : 0,
															shadeClose : false,
															content : jQuery("#deptTree"),
															btn : [ '确定', '取消' ],
															yes : function(
																	index) {
																if (selectNode.data != null) {
																	//选中回显
																	$(
																			".operation_dept input[name=pid]")
																			.val(
																					selectNode.data.id);
																	$(
																			".operation_dept input[name=pidName]")
																			.val(
																					selectNode.data.title);
																}

																layer
																		.close(index);
															}
														});
											});
							form.on('switch(switch)', function() {
								$(".operation_dept input[name=status]").attr(
										'type', 'hidden').val(
										this.checked ? 1 : 0);

							});
							form.on('submit(submit)', function(data) {
								if (data.field.id === undefined
										|| data.field.id === null
										|| data.field.id === "") {
									CoreUtil.sendPost("/sys/dept", data.field,
											function(res) {
												reloadTreeTable();
												$(".dept-table").show();
												$(".operation_dept").hide();
											});
								} else {
									CoreUtil.sendPut("/sys/dept", data.field,
											function(res) {
												reloadTreeTable();
												$(".dept-table").show();
												$(".operation_dept").hide();
											});
								}

								return false;
							});
							var initTree = function(id) {
								var param = {
									deptId : id
								}
								CoreUtil.sendGet("/sys/dept/tree", param,
										function(res) {
											loadDeptTree(res.data);
										});
							};

						});
	</script>
</body>
</html>